<!--  -->
<template>
  <div class="otc-side">
    <div class="select-box">
      <el-select v-model="otc_coin" placeholder="请选择计价币">
        <el-option v-for="item in base_otc" :key="item.id" :label="item.name" :value="item.id">
          <span style="float: left">{{ item.abbr }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
        </el-option>
      </el-select>

      <el-select class="type-select" v-model="type" placeholder="请选择交易类型">
        <el-option
          v-for="(item,index) in deal_type"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="coin-box">
      <div class="hint-title">
        <span>币种</span>
        <span>限价</span>
      </div>
      <GeminiScrollbar :ops="ops" class="coin-list">
        <ul class="nav-list" v-for="(item,index) in coin_list" :key="index">
          <span>{{item.coin}}</span>
          <span>{{item.price}}</span>
        </ul>
      </GeminiScrollbar>
    </div>
    <div class="bar-box">
      <div class="list-box">
        <div>
          <i class="iconfont icon-ziyuan"></i>
          <span>交易管理</span>
        </div>
        <div>
          <router-link to>我的订单/委托单</router-link>
        </div>
      </div>
      <div class="list-box">
        <div>
          <i class="iconfont icon-ziyuan"></i>
          <span>用户中心</span>
        </div>
        <div>
          <router-link to>我的法币账单</router-link>
        </div>
        <div>
          <router-link to>收付款设置</router-link>
        </div>
        <div>
          <router-link to>关注/黑名单</router-link>
        </div>
        <div>
          <router-link to>申请成为商家</router-link>
        </div>
      </div>
      <div class="list-box">
        <div>
          <i class="iconfont icon-ziyuan"></i>
          <span>帮助中心</span>
        </div>
        <div>
          <router-link to>新手指导</router-link>
        </div>
        <div>
          <router-link to>常见问题</router-link>
        </div>
        <div>
          <router-link to>冻卡咨询</router-link>
        </div>
      </div>
    </div>
    <div class="ad-box">
      <i class="iconfont icon-lingdang1"></i>
      <router-link to>限时0手续费快交易吧</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      otc_coin: 1,
      type: 1,
      base_otc: [
        {
          id: 1,
          abbr: "CNY/￥",
          name: "人民币"
        },
        {
          id: 2,
          abbr: "VND/₫",
          name: "越南盾"
        }
      ],
      deal_type: [
        {
          value: 1,
          label: "法币交易"
        },
        {
          value: 2,
          label: "大宗交易"
        }
      ],
      ops: {
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: true,
          keepShow: false,
          background: "#80ffff ",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false
        }
      },
      coin_list: [
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        },
        {
          id: 1,
          coin: "USDT",
          price: 123
        }
      ]
    };
  },
  created() {},
  mounted() {}
};
</script>
<style >
.otc-side .select-box .el-select {
  width: 100%;
}
</style>
<style scoped lang="less">
/* @import url(); 引入css类 */
.otc-side {
  width: 100%;
  padding-bottom: 150px;
  .select-box {
    width: 100%;
    .el-select {
      outline: solid 1ox red;
    }
  }
  .type-select {
    margin: 10px 0;
  }
  .coin-box {
    width: 100%;
    border-radius: 4px;
    border: solid 1px #ebedf0;
    overflow: hidden;
    padding: 8px 0;
    .hint-title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      padding: 0 30px 0 8px;
      width: 100%;
      line-height: 18px;
      color: rgba(0, 0, 0, 0.43);
      font-size: 12px;
    }
    .coin-list {
      overflow-y: scroll;
      height: 275px;
      width: 199px;
      .nav-list {
        display: flex;
        justify-content: space-between;
        padding: 0 30px 0 8px;
        width: 100%;
        line-height: 18px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 36px;
        cursor: pointer;
        &:hover {
          background-color: #f1f5ff;
        }
      }
    }
  }
  .bar-box {
    border-radius: 4px;
    border: solid 1px #ebedf0;
    padding: 9px;
    margin-top: 16px;
    .list-box {
      margin-top: 5px;
      &:nth-of-type(1) {
        div:nth-of-type(1) {
          border: none;
        }
      }
      div {
        &:nth-of-type(1) {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.43);
          line-height: 34px;
          span {
            margin-left: 6px;
          }
          padding-left: 0;
          border-top: solid 1px rgba(0, 0, 0, 0.13);
        }
        line-height: 32px;
        padding-left: 23px;
        font-size: 14px;
        a {
          color: rgba(0, 0, 0, 0.65);
        }
      }
    }
  }
  .ad-box {
    width: 100%;
    height: 36px;
    border-radius: 18px;
    background-color: rgba(78, 136, 240, 0.1);
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 24px;
      color: blue;
      margin-right: 10px;
    }
    a {
      color: #4e88f0;
      font-size: 14px;
      display: block;
    }
  }
}
</style>